// 学生信息页面类比图书管理页面操作

// 需求1 渲染学生信息列表
function initStuList() {

  axios({
    url: '/student/list',
    method: 'get',
  }).then(({ data: res }) => {
    //成功回调
    if (res.code == 0) {
      // console.log(res)
      let arr = []
      res.data.forEach(ele => {
        arr.push(`
   <tr>
        <th scope="row">${ele.id}</th>
        <td>${ele.name}</td>
        <td>${ele.age}</td>
        <td>${ele.sex}</td>
        <td>${ele.group}</td>
        <td>${ele.phone}</td>                                                                               
        <td>${ele.salary}</td>
        <td>${ele.truesalary}</td>
        <td>${ele.province + ele.city + ele.county}</td>
        <td>
          <button type="button" data-id="${ele.id}" class="update btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#updateModal">修改</button>
          <button type="button" data-id="${ele.id}" class="delete btn btn-danger btn-sm">删除</button>
        </td>
      </tr>
   
        `)

      })
      document.querySelector('tbody').innerHTML = arr.join('')
    }
  });

}
// 页面加载完成 渲染列表
initStuList()


//需求2 删除; - 删除按钮是ajax渲染出来的 所以要账事件委托
let tbody = document.querySelector('tbody')
tbody.onclick = function (e) {
  // e。target 指事件引发者
  // 此处可以用类型 不能用id 因为id具有唯一性
  //   if (e.target.className.indexOf('delete') ) {
  if (e.target.className.indexOf('delete') != -1) {
    if (!confirm('你确定要删除吗？')) return
    // 获取 被点击的事件源 上面的 data-id 属性
    let id = e.target.getAttribute('data-id')

    //  发送ajax 删除学生信息
    axios({
      method: 'delete',
      url: '/student/delete',
      params: { id }
    }).then(({ data: res }) => {
      if (res.code == 0) {
        // 成功提示 重新渲染学生列表
        //toastr.success(res.message)
        toastr.success('恭喜您 删除学生信息成功！')

      }
      initStuList()
    })
  }
}



// 需求3: 处理添加表单和修改表单两个表单中的 省市区 三级联动;
//    思路: 封装一个方法，放入一个form表单DOM对象，就初始化里面的 省市区 三级联动;
let formAdd = document.querySelector('#addModal form');
let formUpdate = document.querySelector('#updateModal form');
// 调用初始化三级联动，让两个form表单中的省市区都生效;
initAddress(formAdd);
initAddress(formUpdate);
// 渲染省市区三级联动封装成函数
function initAddress(obj) {
  // 发送ajax，获取所有省份
  axios({
    method: 'get',
    url: '/geo/province'
  }).then(({ data: res }) => {
    // 没法判断业务状态码了，因为后端没有发给我们
    // console.log(res);
    // 渲染所有的省份
    let arr = ['<option selected value="">--省--</option>'];
    res.forEach(ele => {
      // select标签的value值由，被选中的option的value值决定
      arr.push(`<option value="${ele}">${ele}</option>`);
    });
    // 循环完毕之后，赋值
    //   document.querySelector()在整个页面获取指定元素;
    //   formAdd/formUpdate.querySelector()在formAddformUpdate元素中获取指定元素;
    obj.querySelector('[name="province"]').innerHTML = arr.join("");
  });

  // 省的改变，触发市的渲染
  obj.querySelector('[name="province"]').onchange = function () {
    // 只要省改变了，不管是不是空的，都要把县清空
    obj.querySelector('[name="county"]').innerHTML = '<option selected value="">--县--</option>'
    // 非空校验
    if (this.value == '') {
      // 清空市
      obj.querySelector('[name="city"]').innerHTML = '<option selected value="">--市--</option>'
      return; // 就不用发送ajax了
    }
    axios({
      method: 'get',
      url: '/geo/city',
      params: { pname: this.value }
    }).then(({ data: res }) => {
      // 没法判断业务状态码了，因为后端没有发给我们
      let arr = ['<option selected value="">--市--</option>'];
      res.forEach(ele => {
        arr.push(`<option value="${ele}">${ele}</option>`);
      })
      // 渲染
      obj.querySelector('[name="city"]').innerHTML = arr.join("");
    });
  }

  // 市的改变，触发区/县的渲染
  obj.querySelector('[name="city"]').onchange = function () {
    // 非空校验
    if (this.value == '') {
      // 清空市和区县
      obj.querySelector('[name="county"]').innerHTML = '<option selected value="">--县--</option>'
      return; // 就不用发送ajax了
    }
    axios({
      method: 'get',
      url: '/geo/county',
      // 省的名字好单独获取，市的名字直接 this.value
      params: {
        pname: obj.querySelector('[name="province"]').value,
        cname: this.value
      }
    }).then(({ data: res }) => {
      // 没法判断业务状态码了，因为后端没有发给我们
      let arr = ['<option selected value="">-区/县-</option>'];
      res.forEach(ele => {
        arr.push(`<option value="${ele}">${ele}</option>`);
      })
      // 渲染
      obj.querySelector('[name="county"]').innerHTML = arr.join("");
    });
  }
}

// 需求4: 添加学生信息;
formAdd.onsubmit = function (e) {
  e.preventDefault();
  // 发送ajax
  axios({
    method: 'POST',
    url: '/student/add',
    data: $(formAdd).serialize()
  }).then(({ data: res }) => {
    if (res.code == 0) {
      // 提示，关闭弹出层，刷新页面数据
      toastr.success('恭喜您，学员添加成功！');
      document.querySelector('#addModal .btn-close').click();
      initStuList();
    }
  });
}


// 需求5: 点击修改按钮，把数据渲染到修改的form表单中; - 事件委托;
tbody.addEventListener("click", function (e) {
  // 判断事件引发者
  if (e.target.className.indexOf('update') != -1) {
    // 获取自定义属性绑定的id值
    let id = e.target.getAttribute('data-id');
    // 发送ajax，根据id获取学生信息
    axios({
      method: 'get',
      url: '/student/one',
      params: { id }
    }).then(({ data: res }) => {
      // console.log(res);
      if (res.code == 0) {
        // 渲染学生信息 - 简单input
        formUpdate.querySelector('[name="name"]').value = res.data.name;
        formUpdate.querySelector('[name="age"]').value = res.data.age;
        formUpdate.querySelector('[name="phone"]').value = res.data.phone;
        formUpdate.querySelector('[name="salary"]').value = res.data.salary;
        formUpdate.querySelector('[name="truesalary"]').value = res.data.truesalary;
        // 男女性别，单独处理
        let inps = formUpdate.querySelectorAll('[name="sex"]'); // 获取两个input
        if (res.data.sex == '男') {
          // 选中男，取消女的checked属性
          inps[0].checked = true;
          inps[1].checked = false;
        } else {
          // 选中女，取消男的checked属性
          inps[0].checked = false;
          inps[1].checked = true;
        }
        // 所有下拉框，单独处理
        // 获取 name="group" 的所有 option ，遍历每一项，
        // 比较 value和res.data.group的值是否相等，如果相等就设置 selected 为true，否则设置为false
        let options1 = formUpdate.querySelectorAll('[name=group] option');
        for (let i = 0; i < options1.length; i++) {
          // 因为后端给我们的是数值类型，前端获取的是字符串类型，所以不能使用 ===
          if (options1[i].value == res.data.group) {
            options1[i].selected = true;
          } else {
            options1[i].selected = false;
          }
        }
        // 省份的渲染和组号类似
        let options2 = formUpdate.querySelectorAll('[name=province] option');
        for (let i = 0; i < options2.length; i++) {
          // 因为后端给我们的是数值类型，前端获取的是字符串类型，所以不能使用 ===
          if (options2[i].value == res.data.province) {
            options2[i].selected = true;
          } else {
            options2[i].selected = false;
          }
        }
        // 市和区/县渲染，直接渲染(简单吧实现)
        //    复杂版，需要发送两个ajax（作业）
        formUpdate.querySelector('[name=city]').innerHTML = `<option selected value="${res.data.city}">${res.data.city}</option>`
        formUpdate.querySelector('[name=county]').innerHTML = `<option selected value="${res.data.county}">${res.data.county}</option>`
        // 渲染id，但是一定要写到 if语句里面;
        formUpdate.querySelector('[name="id"]').value = res.data.id;
      }
    });
  }
});



// 需求6 修改学生信息
formUpdate.onsubmit = function (e) {
  e.preventDefault()
  // 发送ajax
  axios({
    url: '/student/update',
    method: 'put',
    data: $(formUpdate).serialize(),

  }).then(({ data: res }) => {
    //成功回调
    if (res.code == 0) {
      toastr.success(res.message)
      initStuList()
      document.querySelector("#updateModal .btn-close").click()
    }
  });


}


